<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue列表添加动画</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
			display: none;
		}

		.a-test {
			margin: 100px auto;
			width:  100px;
			height:  100px;
			border: 1px solid #d7d7d7;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<a-test @click="show1()" @success="show2()"></a-test>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.6.8/vue.min.js"></script>
	<script>
		// 局部注册
		var aTest = {
			template: `<div class="a-test"></div>`,
			data() {
				return {

				}
			},
			mounted() {
				console.log(111);
				console.log(this.$listeners);
			}
		}

		var app = new Vue({
			el: '#app',
			// 局部注册组件
			components: {
				aTest: aTest
			},
			data () {
				return {

				}
			},
			mounted () {
				
			},
			methods: {
				show1() {

				},
				show2() {
					
				}
			}
		})

	</script>
</body>	
</html>